<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="css/sunny/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/custom.css" />


<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>

<script type="text/javascript"> 
        var data = {"page":null,"total":0,"records":"1000","rows":[{"id":"1","cell":["1","15381","Alanna","what should I choose between slackware 11.0 and redhat 5? I'm looking for a great desktop envoiernment, etc"]},{"id":"2","cell":["2","15385","Alana","entered the room.","-1","SU","1","-1","S","1"]},{"id":"3","cell":["3","15406","Chauncey","if you're not a big business like IBM, you can instead focus on offering your customers ..."]},{"id":"4","cell":["4","15412","Chauncey","personal sales ?"]},{"id":"5","cell":["5","15418","Chauncey","person-to-person sales ?","2","AD","1","2","AD","1"]},{"id":"6","cell":["6","15422","Gale","sounds like a job for a loop","5","E","1","5","E","1"]},{"id":"7","cell":["7","15423","Chauncey","the human touch ?","-1","S","2","-1","S","2"]},{"id":"8","cell":["8","15439","Christina","left the room (quit: Leaving)."]},{"id":"9","cell":["9","15441","Bennie","entered the room.","-1","NG","3","-1","NG","3"]},{"id":"10","cell":["10","15455","Paulita","Chauncey what do you mean?","2","AN","1","2","NV","1"]}]};
        var dataStr = JSON.stringify(data);
        var lastsel;
	jQuery().ready(function (){ 

jQuery("#list1").jqGrid({ 
	datastr:dataStr, 
	datatype: "jsonstring", 
	colNames:['Post ID','Timestamp', 'User', 'Content','Parent','Relation','Thread', 'Parent2', 'Relation2', 'Thread2'],
	 colModel:[ 
		{name:'Post ID',index:'postId', width:75,}, 
		{name:'Timestamp',index:'timestamp', width:90}, 
		{name:'User',index:'user', width:100}, 
		{name:'Content',index:'content', width:500, formatter:colorThread}, 
		{name:'Parent',index:'parent', width:80, editable:true, edittype:'text'}, 
		{name:'Relation',index:'relation', width:80,align:"right", editable:true, edittype:'text'}, 
		{name:'Thread',index:'thread', width:40}, 
		{name:'Parent',index:'parent', width:80, editable:true, edittype:'text'}, 
		{name:'Relation',index:'relation', width:80,align:"right", editable:true, edittype:'text'}, 
		{name:'Thread',index:'thread', width:40,} ], 

	onSelectRow: function(id){
      		if(id && id!==lastsel){
        		jQuery('#list1').restoreRow(lastsel);
//        		jQuery('#list1').editRow(id,true);
			jQuery('#annotator1').text(jQuery('#list1').jqGrid('getCell', id, 'Content'));
          		lastsel=id;
      		}
    	},
        afterInsertRow: function(id)  {
                jQuery('#list1').jqGrid('setRowData', id, 'false', {"background-color":"black", "background":"none"});
        },
	height: 500,
	rowNum: -1,
        scrollOffset: 20,
        sortable: true,
	autowidth: true, 
	pager: jQuery('#pager1'), 
	sortname: 'id', 
	viewrecords: true,
	sortorder: "desc",
	caption:"Example", 
 	loadonce:true,
}).navGrid('#pager1',{add:false,del:false}); 

  function colorThread(cell, options, rowArr) {
//     if(rowArr[2] == 1) {
//     }
       return cell;
  }
});
</script>
</head>

<body>
<table id="list1"></table> <div id="pager1"></div>

<div id="annotator1"></div>
<div id="annotator2"></div>
</body>
</html> 
